<!--
 * @Author: [yuantongxin]
 * @Date: 2021-10-23 14:58:55
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-10-25 16:36:45
 * @Description: 
-->
<template>
  <div>
    <!-- 批量删除开始 -->
    <div>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-button type="danger" style="margin-right: 15px" @click="allDelete">批量删除</el-button>

        <el-form-item>
          <el-input
            clearable
            v-model="form.keywords"
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 批量删除结束 -->

    <!-- 表格开始 -->
    <!-- {{tableData}} -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        type="index"
        :index="1"
        label="序号"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="comment"
        label="评论内容"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="userId"
        label="评论人编号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="articleId"
        label="资讯编号"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="commentTime"
        label="评论时间"
        width="200"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
         {{moment(scope.row.commentTime).format('YYYY-MM-DD HH:mm:SS') }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="评论状态"
        width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === '通过'"
            >通过</el-tag
          >
          <el-tag type="danger" v-else-if="scope.row.status === '不通过'"
            >未通过</el-tag
          >
          <el-tag type="info" v-else>未审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" show-overflow-tooltip>
        <template slot-scope="scope" >
          <el-button
            type="text"
            size="small"
            @click="toDelete(scope.row.id)"
            style="color: #ffbb17"
            >删除</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="toChangeStatus(scope.row.id,'审核通过')"
            style="color: #5cc1a7" v-if="scope.row.status === '未审核'"
            >通过</el-button
          >
          <el-button
            type="text"
            size="small"
            style="color: #e65f70"
            @click="toChangeStatus(scope.row.id,'审核未通过')" v-if="scope.row.status === '未审核'"
            >不通过</el-button
          >
        </template>
        
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
  </div>
</template>

<script>
let moment = require('moment');

import { pageQuery,deleteById,batchDelete,check } from "@/api/audit";
export default {
  data() {
    return {
      form:{},
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      input: "",
    };
  },
  created() {
    this.queryPage();
  },
  methods: {
    moment,
      async toChangeStatus(id,type){
          let res = await check({id})
          console.log(res);
      },
      allDelete() {
      this.$confirm("此操作将永久删除所有数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await batchDelete();
          this.queryPage();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    toDelete(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteById({ id });
          this.queryPage();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async onSubmit() {
      let temp = {
        ...this.params,
        ...this.form,
      };
      //   for (let key in temp) {
      //     if (!temp[key]) {
      //       delete temp[key];
      //     }
      //   }
      let res = await pageQuery(temp);
      console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.total;
      // this.queryPage();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async queryPage() {
      let temp = {
        ...this.params,
      };
      let res = await pageQuery(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
      // console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>